<template>
	<div class="bgimgsh">
	<div class="box">
		<div class="container">
			<div class="logincon">
				<div class="text-right" @click="goback()">
					<img src="../assets/images/clsoe.svg" alt="" />
				</div>
				<h2 class="title-center">{{$t('indexTitle.title191')}}</h2>
				<div style="margin-bottom: 10px;">
					<div class="form">
						<div class="">
							<div class="formitem">
								<div class="label">{{$t('indexTitle.title192')}}</div>
								<el-input v-model="name" :placeholder="$t('indexTitle.title204')"
									:class="{errorww:isShowOness,error:isShowThreess}"
									@input='usernameInput()'></el-input>
							</div>
							<div class="zhuyiBoxTow" v-if="isShowOness&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{namesmall}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowOness&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>
						<div class="">
							<div class="formitem">
								<div class="label">{{$t('indexTitle.title193')}}</div>
								<el-input :placeholder="$t('indexTitle.title205')" v-model="password" show-password
									:class="{errorww:isShowTowss,error:isShowThreess}"
									@input='passwordInput()'></el-input>
							</div>
							<div class="zhuyiBoxTow" v-if="isShowTowss&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{psdsamll}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowTowss&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>
						<el-button @click="logins()"
							:class="{errorwwadd:isShowTowss,errorwwaddaa:isShowThreess}">{{$t('indexTitle.title2')}}</el-button>
					</div>
				</div>
				<div class="bottom-text" @click="goregister()">{{$t('indexTitle.title194')}}</div>
				<div class="forget-options">
					<div>{{$t('indexTitle.title195')}}</div>
					<div>{{$t('indexTitle.title196')}}</div>
				</div>
			</div>
			<div class="text">HK11</div>
		</div>
		<div class="jiazaidonghua" v-if="isloadingTowShow">
			<img src="../assets/img/loading-ani.svg" alt="" />
		</div>
		<!-- <div class="buttons">
			<img src="../assets/images/xiaoxi.png" alt="" />
		</div> -->
	</div>
</div>
</template>

<script>
	import {
		login
	} from "../utils/api.js"
	export default {
		data() {
			return {
				name: '',
				password: '',

				namesmall: '',
				psdsamll: '',
				isShowOness: false,
				isShowTowss: false,
				isShowThreess: false,
				messageText: "",
				isloadingTowShow: false,
			}
		},
		created() {

		},
		mounted() {
			if (localStorage.getItem('nameNum') && localStorage.getItem('passwordNum')) {
				this.name = localStorage.getItem('nameNum');
				this.password = localStorage.getItem('passwordNum');
			}
			// localStorage.clear();
		},
		methods: {
			usernameInput() {
				if (!this.name) {
					this.isShowOness = true;
					this.namesmall = this.$t('indexTitle.title197')
				} else {
					this.isShowOness = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			passwordInput() {
				if (!this.password) {
					this.isShowTowss = true;
					this.psdsamll = this.$t('indexTitle.title198')
				} else {
					this.isShowTowss = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
				console.log(this.isShowTowss, this.isShowThreess);
			},
			logins() {
				let that = this;
				this.isloadingTowShow = true;
				this.isShowThreess = false;
				this.isShowOness = false;
				this.isShowTowss = false;
				if (this.name == '') {
					this.isShowOness = true;
					this.namesmall = this.$t('indexTitle.title197')
					this.isloadingTowShow = false;
					// this.$message.error('请输入帐号');
					return false
				}
				if (this.password == '') {
					this.isShowTowss = true;
					this.psdsamll = this.$t('indexTitle.title198')
					this.isloadingTowShow = false;
					// this.$message.error('请输入密码');
					return false
				}
				let data = {
					name: this.name,
					password: this.password
				}
				login(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.$message.success(res.status.msg);
						localStorage.setItem('token', res.data)
						localStorage.setItem('nameNum', this.name)
						localStorage.setItem('passwordNum', this.password)
						// setTimeout(function() {
							that.$router.push('/index')
							that.isloadingTowShow = false;
						// }, 1000)
					} else {
						this.isShowThreess = true;
						this.isloadingTowShow=false;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					this.isloadingTowShow=false;
					console.log(err, 'err')
				});
			},
			goback() {
				this.$router.push('/')
			},
			goregister() {
				this.$router.push('/register')
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}
.bgimgsh {
		height: 90vh;
	/* 	overflow-y: auto;
		overflow-x: hidden; */
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.box {
		align-items: center;
		background: url('../assets/images/bg.png') bottom/cover no-repeat fixed;
		display: flex;
		height: auto;
		justify-content: center;
		height: -webkit-fill-available;
		height: 100vh;
		overflow-y: scroll;
		flex-direction: column;
		padding: 22px;
		/* padding-bottom: calc(50px + env(safe-area-inset-bottom)); */
		padding-bottom: 150px;
	}

	.container {
		background-color: rgba(255, 255, 255, .4);
		backdrop-filter: blur(10px);
		border-radius: 20px;
		line-height: 40px;
		overflow: hidden;
		padding: 0;
		position: relative;
		width: 90%;
		z-index: 0;
	}

	/* .container::before {
		backdrop-filter: blur(10px);
		background-color: rgba(255, 255, 255, .4);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	} */

	.text-right {
		background-color: #62707c;
		border: 1px solid #fff;
		border-radius: 100px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
		color: #ba9979;
		font-size: 12px;
		height: 27px;
		line-height: 25px;
		padding: 0;
		position: absolute;
		right: 7px;
		text-align: center;
		top: 7px;
		width: 27px;
		z-index: 5;
	}

	.text-right img {
		display: block;
		filter: brightness(100);
		transform: scale(.7);
	}

	.title-center {
		border-bottom: 1px solid rgba(0, 0, 0, .1);
		color: #fff;
		font-size: 16px;
		font-weight: 400;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	.form {
		background: transparent;
		box-sizing: border-box;
		padding: 0 10px;
		position: relative;
		transform: scale(.95);
		z-index: 1;
	}

	.formitem {
		margin: 0;
	}

	.label {
		color: #fff;
		display: block;
		font-size: 13px;
		line-height: 30px;
	}

	.zhuyiBoxTow {}

	.zhuyiBoxTow img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.error /deep/ .el-input__inner {
		border: 1px solid #e94951 !important;
		/* color: #e94951 !important; */
	}

	.errorww /deep/ .el-input__inner {
		border: 1px solid #e94951 !important;
		/* color: #e94951 !important; */
	}

	.zhuyiBoxTow {
		display: flex;
		align-items: center;
		font-size: 12px;
		margin: 0px 0 0px;
		color: #e94951;
		font-weight: 300;
	}

	.label::before {
		color: #dd9c4b;
		content: "*";
		margin: 0 3px;
	}

	/deep/ .el-input__inner {
		background-color: rgba(0, 0, 0, .5);
		border: 0 solid #000;
		border-radius: 100px;
		box-shadow: inset 0 0 0 0 #ccc;
		color: #fff;
		text-indent: 10px;
	}

	/deep/ .el-button {
		margin-top: 40px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		width: 100%;
		background-color: #7240ff;
		border: none;
		border-radius: 100px;
	}

	.errorwwadd,
	.errorwwaddaa {
		margin-top: 0;
	}

	.bottom-text {
		color: #222;
		font-size: 14px !important;
		text-align: center;
	}

	.forget-options {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.forget-options div {
		color: #222;
		padding: 0 10px;
		font-size: 12px;
	}

	.text {
		color: #bbb;
		text-align: center;
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}

	.jiazaidonghua {
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
</style>